<template>
  <div class="weather">
    <div><h1>{{city}}天气预报</h1></div>
    <div class="control">
      <div><CollectionOne @sendFromChild="abc"></CollectionOne></div>
      <div><ButtonOne @sendFromChild="def"></ButtonOne></div>
    </div>
    <div class="result">
      <Table :tableData="weatherData" :key="componentKey" :loading="loading"></Table>
    </div>
  </div>
</template>
<script>
import CollectionOne from "/src/components/CollectionOne.vue";
import ButtonOne from "/src/components/ButtonOne.vue";
import Table from "/src/components/Table.vue";
import axios from "axios";

export default {
  components: {
    CollectionOne,
    ButtonOne,
    Table,
  },
  data() {
    return {
      selectValue:null,
      weatherData:[],
       componentKey: 0,
       city:null,
       loading:false
    };
  },
  name: "Weather",
  created() {},
  methods: {
    abc(data) {
      this.selectValue = data;
    },
    def(data) {
      this.loading=true;
      axios
        .get(`http://localhost/ajax.php?select=${this.selectValue}`)
        .then((response) => {
          this.weatherData = response.data.data.forecast;
          this.city = "["+response.data.cityInfo.city+"]";
          this.loading=false;
          //this.componentKey += 1; // 改变key的值，子组件会被重新渲染
        })
        .catch((error) => {
          console.error("There was an error!", error);
        });
    },
  },
};
</script>
<style scoped>
.control {
  display: flex;
  justify-content: center;
}
.result {
  /* display:flex;
  justify-content: center;
  align-items: center; */
  margin: 10vh auto;
 
  width: 80%;
}
.title{
  text-align:left;
}
</style>